<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-14 17:05:18
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-09 10:33:33
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\screen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="screenTimeMain">
    <el-popover
      placement="bottom-end"
      popper-class="screenTime"
      trigger="click"
      ref="screenTime"
    >
      <i
        slot="reference"
        class="el-icon-set-up"
        style="color: #1890ff; cursor: pointer"
      ></i>
      <div class="attributeMain">
        <div v-for="item in list" :key="item.value" @click="handleClick(item)" :style="{color:value === item.value ? '#1890ff' : '#444'}">
          {{ item.label }}
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    getTimeData:{
      type:Function,
      default:()=>{}
    }
  },
  data() {
    return {
      list: [
        {
          label: "按创建时间最近",
          value: "1",
        },
        {
          label: "按创建时间最早",
          value: "2",
        },
        {
          label: "按开始时间最晚",
          value: "3",
        },
        {
          label: "按开始时间最早",
          value: "4",
        },
        {
          label: "按结束时间最晚",
          value: "5",
        },
        {
          label: "按结束时间最早",
          value: "6",
        },
      ],
      value: "1",
    };
  },
  methods: {
    handleClick(row) {
      this.value = row.value;
      this.getTimeData(row.value)
      this.$refs.screenTime.doClose();
    },
  },
  created() {},
};
</script>

<style lang="scss">
.screenTime {
  padding: 6px 0;
  min-width: 125px;
  .attributeMain {
    div {
      color: #444;
      font-size: 14px;
      padding: 6px 12px;
      cursor: pointer;
      &:hover {
        background: #f5f7fa;
        border-radius: 6px;
      }
    }
  }
}
</style>